<template>
	<!-- 分享面板 -->
	<!-- <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" /> -->
	<view class="cu-card dynamic {{isCard?'no-card':''}}" style="overflow: auto;">
		<view class="cu-item shadow">
			<view class="cu-list menu-avatar">
				<view class="cu-item">
					<view class="cu-avatar round lg" :style="{ 'background-image': 'url(' + avator + ')' }">
					</view>
					<view class="content flex-sub">
						<view>{{ name }}</view>
						<view class="text-gray text-sm flex justify-between">
							{{ time }}<text style="margin-left: 2px;">{{ '#' + tag }}</text>
						</view>
					</view>
				</view>
			</view>
			<h3 class="text-content" style="width: 100%; text-align: center;">
				{{ title }}
			</h3>
			<view class="text-content" style="color: darkgray;">
				地址：{{ address }}
			</view>
			<view class="" style="color: black;padding: 0 4vw;">
				{{ content }}
			</view>
			<view v-for="(item, index) in imgList" :key="index">
				<view class=" flex-sub {{isCard?'col-3 grid-square':'col-1'}}" @click="showIMG(index)"
					style="padding:0 2vw;">
					<!-- <view class="bg-img {{isCard?'':'only-img'}}" :style="{ 'background-image': 'url(' + item + ')' }">
					</view> -->
					<img :src="item" alt="" style="margin: 0 auto;width: 100%; height: auto;" />
				</view>

			</view>

			<view v-if="tagid <= 4 && tagid >= 1">
				<view class="rank">
					<text style="margin-right: 2vw;">技术:</text><van-rate v-model="value4" void-icon="star" readonly
						void-color="#bdbdbd" />
				</view>
				<view class="rank">
					<text style="margin-right: 2vw;">速度:</text><van-rate v-model="value5" void-icon="star" readonly
						void-color="#bdbdbd" />
				</view>
				<view class="rank">
					<text style="margin-right: 2vw;">体力:</text><van-rate v-model="value6" void-icon="star" readonly
						void-color="#bdbdbd" />
				</view>
			</view>

			<view class="text-gray text-sm text-right padding">
				<text @click="ShareId">
					<text class="cuIcon-forwardfill margin-lr-xs"></text> 分享</text>
				<text @click="CommentPost">
					<text class="cuIcon-attentionfill margin-lr-xs"></text> 评论</text>
				<text v-if="Like == true" @click="like">
					<text class="cuIcon-like margin-lr-xs"></text> 收藏
				</text>
				<text v-if='Like == false' @click="dislike" style="color: red;">
					<text class="cuIcon-likefill margin-lr-xs"></text> 已收藏
				</text>
				<text @click="say" v-if="ifmy"><text class="cuIcon-messagefill margin-lr-xs"></text> 联系</text>
				<text @click="transe" v-if="!ifmy"><text class="cuIcon-messagefill margin-lr-xs"></text> 修改</text>
			</view>
			<!--  -->
			<van-empty description="暂无评论" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
				v-if="comment_list.length == 0" />
			<view v-else style="margin-left: 4vw;font-size: x-small;color: burlywood;border-top: 1px solid aliceblue;">
				共有评论{{ Comment_ttoal }}条</view>
			<view v-for="(item, index) in comment_list" :key="index">
				<comment_section :avatar='item.avatar' :mesid='this.mesid' :content='item.content'
					:creatId='item.createBy' :name='item.username' :time='item.createTime' :id='item.id'
					:children='item.children'></comment_section>
			</view>
			<view class="more" @click="showMore" v-if="if_more">
				查看更多……
			</view>
		</view>
		<!-- 评论区 -->
		<view class="cu-bar foot input" style="width: 100vw;z-index: 100;" v-if="showInput">
			<input class="solid-bottom" v-model="CommentValue" :focus="false" maxlength="300" cursor-spacing="10"
				@focus="InputFocus" @blur="InputBlur" />
			<button class="cu-btn bg-green shadow" @click="PostComment">发送</button>
		</view>

		<!-- 其他推荐 -->
		<!-- 			<view class="meslist" v-for="(item, index) in list" :key="item.userid">
				<view class="mes" @click="showdetail(item)">
					<img :src="item.img" alt="" class="headimg" />
					<view>
						<h2 class="title">{{ item.title }}</h2>
						<view class="content">
							{{ item.content }}
						</view>
					</view>
				</view>
			</view> -->
	</view>
	<AllcommentDialog></AllcommentDialog>
</template>

<script>
import {
	showpost,
	addMyfavoritepost,
	removeMyfavoritepost,
	getcommonents,
	postcomment,
	encryptString
} from '@/store/api.js'
import AllcommentDialog from '@/subpkg/components/AllCommentDialog.vue'
import comment_section from '@/subpkg/components/comment_section.vue'
import { ref, watch } from 'vue';
import { showToast } from 'vant';
// import UniShare from 'uni_modules/uni-share/js_sdk/uni-share.js';
// const uniShare = new UniShare();
export default {
	components: {
		comment_section,
		AllcommentDialog
	},
	setup() {
		const options = [{
			name: '微信',
			icon: 'wechat'
		},
		{
			name: '朋友圈',
			icon: 'wechat-moments'
		},
		{
			name: 'QQ',
			icon: 'qq'
		},
		{
			name: '复制链接',
			icon: 'link'
		}
		];
		return {
			options
		};
	},
	data() {
		return {
			posttid: '',
			showShare: false,
			Comment_ttoal: 0,
			value4: 2,
			value5: 3,
			value6: 1,
			tag: '',
			tagid: -1,
			if_more: true,
			CommentValue: '',
			showInput: false,
			// InputBottom: 0,
			ifmy: true,
			mesid: '',
			Like: true,
			userid: '',
			title: '',
			name: '',
			imgList: [],
			avator: '',
			time: '',
			address: '',
			content: '',
			list: [],
			comment_list: [],
		}
	},

	onLoad(value) {
		const myid = uni.getStorageSync('userid')
		// console.log(value.id)
		if (value.copy)
			uni.setStorageSync('detail', value.copy)
		this.posttid = value.id
		showpost(value.id).then(res => {
			if (myid == res.data.posterId) {
				this.ifmy = false
			}
			console.log(res.data)
			this.tag = res.data.tags[0].name
			this.tagid = res.data.tags[0].id
			this.mesid = res.data.id
			this.userid = res.data.posterId
			this.title = res.data.title
			this.avator = res.data.posterAvatar
			this.name = res.data.posterUsername
			this.time = res.data.beginTime.substring(0, 10) + '-' + res.data.beginTime.substring(12, 16) +
				'-' + res.data.endTime.substring(0, 10) + '-' + res.data.endTime.substring(12, 16)
			this.address = res.data.meetAddress
			this.content = this.processString(res.data.content).text
			this.imgList = this.processString(res.data.content).images
			this.value4 = this.processString(res.data.content).rank.value4 ? this.processString(res.data
				.content).rank.value4 : ''
			this.value5 = this.processString(res.data.content).rank.value5 ? this.processString(res.data
				.content).rank.value5 : ''
			this.value6 = this.processString(res.data.content).rank.value6 ? this.processString(res.data
				.content).rank.value6 : ''
			this.Like = !res.data.isKeep
			console.log(this.value4)
			console.log(this.value5)
			console.log(this.value6)
			getcommonents(this.mesid, 1, 3).then(res => {
				if (res.data.data.total == 0) {
					this.if_more = false
				}
				console.log(res.data)
				this.Comment_ttoal = res.data.data.total
				res.data.data.rows.forEach(item => {
					this.comment_list.push(item)
				})
			}).catch(err => {
				console.log(err)
			})
		})
	},
	methods: {
		ShareId() {
			uni.setClipboardData({
				data: encryptString("复制到Meet打开：快来加入我们吧:" + this.posttid),
				success: function (res) {
					console.log("success:" + JSON.stringify(res));
					uni.showToast({
						title: "口令已复制",
						icon: "success"
					});
				},
				fail: function (err) {
					console.log("fail:" + JSON.stringify(err));
					uni.showToast({
						title: "复制失败",
						icon: "none"
					});
				}
			});
		},
		onSelect(option) {
			this.showShare = false;
			console.log(option.name)
			if (option.name == '微信') {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 1,
					summary: "复制到Meet打开：快来加入我们吧:" + this.posttid,
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			} else if (option.name == 'QQ') {
				uni.share({
					provider: "qq",
					type: 1,
					title: 'Meet',
					summary: "复制到Meet打开：快来加入我们吧:" + this.posttid,
					href: 'http://webmeet.ysyxmy.top/#/',
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			} else if (option.name == '朋友圈') {
				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 1,
					summary: "复制到Meet打开：快来加入我们吧:" + this.posttid,
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			} else {
				uni.setClipboardData({
					data: "复制到Meet打开：快来加入我们吧:" + this.posttid,
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
						uni.showToast({
							title: "复制成功",
							icon: "success"
						});
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
						uni.showToast({
							title: "复制失败",
							icon: "none"
						});
					}
				});

			}
		},
		showIMG(index) {
			uni.previewImage({
				current: index,
				urls: this.imgList,
				loop: true,
				indicator: Number,
				longPressActions: true
			})
		},
		showMore() {
			uni.$emit('showCommentDialog', this.mesid)
		},
		PostComment() {
			const data = {
				postId: this.mesid,
				type: 0,
				rootId: -1,
				toCommentId: this.userid,
				toCommentUserId: '',
				content: this.CommentValue
			}
			this.Comment_ttoal++
			postcomment(data).then(res => {
				if (this.comment_list.length < 3) {
					console.log('这个是再次评论列表')
					getcommonents(this.mesid, 1, 3).then(res => {
						this.comment_list = []
						if (res.data.data.total == 0) {
							this.if_more = false
						}
						console.log(res.data)
						res.data.data.rows.forEach(item => {
							this.comment_list.push(item)
						})
					}).catch(err => {
						console.log(err)
					})

				}
			})

			this.CommentValue = ''
			this.showInput = false
		},
		CommentPost() {
			this.showInput = true
		},
		InputFocus(e) {
			this.InputBottom = e.detail.height
		},
		InputBlur(e) {
			this.InputBottom = 0
		},
		say() {
			// uni.navigateTo({
			// 	url: `/subpkg/chat_detail/chat_detail?name=${this.name}&src=${this.avator}&userid=${this.userid}`
			// })
			let ifConnect = uni.getStorageSync('AlreadyConnect')
			if (ifConnect) {
				uni.navigateTo({
					url: `/subpkg/chat_detail/chat_detail?name=${this.name}&src=${this.avator}&userid=${this.userid}`
				})
			} else {
				console.log(this.avator)
				uni.setStorageSync('detail', JSON.stringify({
					name: this.name,
					avator: this.avator,
					userid: this.userid
				}))
				uni.switchTab({
					url: '/pages/Chat/Chat'
				})
			}
		},
		transe() {
			uni.navigateTo({
				url: `/subpkg/changeMypost/changeMypost?id=${this.mesid}`
			})
		},
		like() {
			this.Like = false
			addMyfavoritepost(this.mesid)
		},
		dislike() {
			this.Like = true
			removeMyfavoritepost(this.mesid)
		},
		showdetail(item) {
			// uni.$emit('showdialog',item)
			console.log(item)
			uni.navigateTo({
				url: `/subpkg/mes_detail/mes_detail?id=${item.title}`
			})
		},
		processString(inputString) {
			const parts = inputString.split('**/img/**');

			// 获取文本部分和图片 URL 部分
			const textPart = parts[0];
			const imageUrls = parts[1] ? parts[1].split(',') : [];

			// 将图片 URL 部分存储为数组
			const imagesArray = imageUrls.map(url => url.trim());

			const part2 = textPart.trim().split('**/rank/**')

			let newtext = part2[0]
			// let rankpart = part2[1] ? JSON.parse(part2[1]) : ''
			let rankpart = part2[1] ? JSON.parse(part2[1]) : ''
			// 返回处理后的结果，图片部分作为数组返回
			return {
				rank: rankpart, //评分部分
				text: newtext.trim(), // 去除文本部分两端的空格
				images: imagesArray // 图片 URL 部分作为数组返回
			};

		}
	}
}
</script>

<style lang="scss" scoped>
.cu-card {
	width: 100vw;
	// height: 100vh;
}

@media screen and (min-width: 1200px) {
	.cu-card {
		width: 30vw;
		// height: 100vh;
	}
}

.more {
	width: 100%;
	text-align: center;
	color: gray;
}

.rank {
	margin-left: 5vw;
}

// 页面
.meslist {
	position: relative;
	z-index: 1;
}

/* 单个卡片 */
.mes {
	z-index: 5;
	display: flex;
	margin-top: 10rpx;
	border: 1px solid #F0F8FF;
	// background-color: 	#F8F8FF;
	height: 170rpx;
	align-items: center;
}

.headimg {
	width: 100rpx;
	height: 100rpx;
	margin-right: 50rpx;
	border-radius: 75%;
}

.content {
	width: 600rpx;
	font-size: 25rpx;
}

.title {
	font-weight: 700;
	font-size: 30rpx;
}

.bg {
	width: 100%;
	height: 74%;
	z-index: 0;
	position: absolute;
}
</style>